<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
           *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
         }
         h1{
             text-align: center;
         }
        .con{
            width: 300px;
            height: 700px;
            /* background-color: pink; */
            margin: 0 auto;
        }
        .one{
            width: 300px;
            height: 60px;
            background-color: #ebebeb;
            border: 1px solid black;
        }
        .two,.thr,.fou{
            width: 300px;
            height: 210px;
            background-color: #ff4e4e;
            border: 1px solid black;
            position: relative;
            overflow: hidden;
        }
        img{
            width: 298px;
            height: 208px;
            float: left;
            
        }
        .two1,.thr1,.fou1{
            position: absolute;
            width: 600px;
            height: 208px;
            top: 0;
             left: 0;
             transition: all 0.6s linear;
        }
        .two2,.thr2,.fou2{
            width: 298px;
            height: 30px;
            /* background-color: rgb(0, 153, 89); */
            position: absolute;
            bottom: 0;
            left: 0;
            text-align: center;
            font-size: 20px;
            transition: all 0.6s linear;
            color: seashell;
        }
        .two3,.thr3,.fou3{
            width: 298px;
            height: 30px;
            /* background-color: rgb(0, 153, 89); */
            position: absolute;
            bottom: -30px;
            left: 0;
            text-align: center;
            font-size: 20px;
            transition: all 0.6s linear;
            color: seashell;
        }
        .two2,.two3{
            background-color: rgb(255, 81, 133);
        }
        .thr2,.thr3{
            background-color: rgb(21, 6, 109);
        }
        .fou2,.fou3{
            background-color: rgb(16, 109, 231);
        }

    </style>
</head>
<body>
    <div class="con">
        <div class="one"><h1>专辑推荐</h1></div>
        <div class="two">
            <div class="two1">
                <img src="images/1_1.jpg" alt="">
                <img src="images/1_2.jpg" alt="">
            </div>
            <div class="two2">coco/可可泥</div>
            <div class="two3">几何为网/极致绚烂</div>
        </div>
        <div class="thr">
            <div class="thr1">  
                <img src="images/2_1.jpg" alt="">
                <img src="images/2_2.jpg" alt="">
           </div>
           <div class="thr2">INSUN/恩裳</div>
           <div class="thr3">2013春印象</div>
        </div>
        <div class="fou">
            <div class="fou1">
                <img src="images/3_1.jpg" alt="">
                <img src="images/3_2.jpg" alt="">
            </div>
            <div class="fou2">JNBY/江南布衣</div>
            <div class="fou3">NANMEN/南梦</div>
        </div>
    </div>
    <script src="jQuery.js"></script>
    <script>
        $('.two').hover(function(){
        $('.two1').css('left','-298px');
        $('.two2').css('bottom','-30px');
        $('.two3').css('bottom','0');
    },function(){
        $('.two1').css('left','0');
        $('.two2').css('bottom','0');
        $('.two3').css('bottom','-30px');
    })
    $('.thr').hover(function(){
        $('.thr1').css('left','-298px');
        $('.thr2').css('bottom','-30px');
        $('.thr3').css('bottom','0');
    },function(){
        $('.thr1').css('left','0');
        $('.thr2').css('bottom','0');
        $('.thr3').css('bottom','-30px');
    })
    $('.fou').hover(function(){
        $('.fou1').css('left','-298px');
        $('.fou2').css('bottom','-30px');
        $('.fou3').css('bottom','0');
    },function(){
        $('.fou1').css('left','0');
        $('.fou2').css('bottom','0');
        $('.fou3').css('bottom','-30px');
    })

    </script>
</body>
</html>